/**
 * Created by xlwangar on 2018/5/31.
 */

    var axisLabel = {
        lineStyle: {
            show: true,
            color: '#053A62'
        },
        textStyle: {
            fontSize: 12,
            color: '#357ACC'
        }
    };
    var axisLine = {
        lineStyle: {
            color: '#053A62',
            width: 0,
        }
    };
    var splitLine = {
        lineStyle: {
            color: '#053A62'
        }
    };

    function mapInitdata() {
        var map = echarts.init(document.getElementById("map"));	
	    $.get('../js/screen/hubei.json', function (geoJson) {
	        echarts.registerMap('HB', geoJson);	
	        map.setOption(option = {
	            title: {
	                text: '目录提供情况',
	                textStyle: {
	                    color: '#00AEEF',
	                    fontWeight: 200,
	                    fontSize:56
	                },
	                x: 'center',
	                y: 40
	            },
	            tooltip: {
	                trigger: 'item',
	                formatter: '{b}<br/>{c} (个)'
	            },
	            visualMap: {
	                min: 0,
	                max: 1000,
	                realtime: false,
	                calculable: true,
	                x:200,
	                y:'20%',
	                textStyle:{
	                    color:'#fff'
	                },
	                inRange: {
	                    color: ['#194360','#0ca3b1', '#00ffff']
	                }
	            },
	            series: [
	                {
	                    center:[112.17185,31.731877],
	                    zoom:1,
	                    aspectScale:1,
	                    name: '目录提供情况',
	                    type: 'map',
	                    mapType: 'HB', // 自定义扩展图表类型
	                    //selectedMode : 'multiple',
	                    itemStyle: {
	                        normal: {//未选中状态
	                            borderWidth:1,//边框大小
	                            borderColor:'transparent',
	                            areaColor: 'orange',//背景颜色
	                            label: {
	                                show: true//显示名称
	                            }
	                        },
	                        emphasis: {// 也是选中样式
	                            borderWidth:1,
	                            borderColor:'transparent',
	                            areaColor: '#ff0066',
	                            label: {
	                                show: true,
	                                textStyle: {
	                                    color: '#fff'
	                                }
	                            }
	                        }
	                    },
	                    data:[
	                        {name: '十堰市', value: 50},
	                        {name: '神农架林区', value: 3},
	                        {name: '恩施土家族苗族自治州', value: 500},
	                        {name: '宜昌市', value: 700},
	                        {name: '襄樊市', value: 960},
	                        {name: '随州市', value: 600},
	                        {name: '荆门市', value: 500},
	                        {name: '荆州市', value: 960},
	                        {name: '潜江市', value: 460},
	                        {name: '仙桃市', value: 470},
	                        {name: '天门市', value: 400},
	                        {name: '孝感市', value: 200},
	                        {name: '武汉市', value: 960,selected:true},
	                        {name: '黄冈市', value: 660},
	                        {name: '鄂州市', value: 250},
	                        {name: '黄石市', value: 200},
	                        {name: '咸宁市', value: 300}
	                    ]
	                }
	            ]
	        });
	    });
    	map.on('click', function (params) {
    	    // 控制台打印数据的名称
    		getcityInfodata(params.name);
    	});
    }
    
    function lineInitdata() {
        var line = echarts.init(document.getElementById("line"));
	    var lineOption = {
	        color: ['#01d4da', '#019bd8', '#d1045d'],
	        title: {
	            text: '挂接趋势',
	            textStyle: {
	                color: '#00AEEF',
	                fontWeight: 200,
	                fontSize: 56
	            },
	            x: 'center',
	            y: 'top'
	        },
	        legend: {
	            x: '75%',
	            y: 30,
	            itemWidth: 10,
	            itemHeight: 10,
	            data: [{
	                name: '库表',
	                textStyle: {color: '#01d4da'}
	            }, {
	                name: '文件',
	                textStyle: {color: '#019bd8'}
	            }, {
	                name: '接口',
	                textStyle: {color: '#d1045d'}
	            }]
	        },
	        grid: {
	            x: 20,
	            y: 100,
	            x2: 4,
	            y2: 30,
	            borderWidth: 1,
	            borderColor: '#05345A',
	            containLabel: true,
	        },
	        tooltip: {
	            trigger: 'axis'
	        },
	        calculable: true,
	        xAxis: [
	            {
	                type: 'category',
	                axisTick: {length: 0},
	                splitLine: splitLine,
	                axisLine: axisLine,
	                axisLabel: axisLabel,
	                data: ['2016/1', '2016/2', '2016/3', '2016/4', '2016/5', '2016/6', '2016/7', '2016/8', '2016/9', '2016/10', '2016/11', '2016/12', '2017/1', '2017/2', '2017/3', '2017/4', '2017/5', '2017/6']
	            }
	        ],
	        yAxis: [
	            {
	                type: 'value',
	                boundaryGap: true,
	                axisTick: {length: 0},
	                splitLine: splitLine,
	                axisLine: axisLine,
	                axisLabel: axisLabel,
	                splitArea: {
	                    show: true,
	                    onGap: true,
	                    areaStyle: {
	                        color: ['rgba(6,29,62,.3)',
	                            'rgba(6,29,62,.3)']
	                    }
	                },
	
	            }
	        ],
	        series: [
	            {
	                name: '库表',
	                type: 'line',
	                smooth: true,
	                data: [2, 12, 6, 38, 9, 25, 33, 4, 8, 5, 32, 12, 6, 48, 42, 5, 32, 4,]
	
	            },
	            {
	                name: '文件',
	                type: 'line',
	                smooth: true,
	                data: [12, 32, 36, 48, 19, 35, 23, 14, 48, 35, 12, 32, 36, 48, 19, 35, 23, 14]
	
	            },
	            {
	                name: '接口',
	                type: 'line',
	                smooth: true,
	                data: [12, 32, 36, 22, 19, 35, 33, 14, 68, 35, 52, 32, 76, 48, 19, 35, 53, 14]
	
	            }
	        ]
	    };
	    line.setOption(lineOption);
    }
    
    function pieinitdata() {
        var pie = echarts.init(document.getElementById("pie"));
	    var pieOption = {
	        color: ['#01f6f7', '#00aeef', '#ff0066'],
	        tooltip: {
	            trigger: 'item',
	            formatter: "{a} <br/>{b}: {c} ({d}%)"
	        },
	        series: [
	            {
	                name: '挂接趋势',
	                type: 'pie',
	                radius: ['75%', '90%'],
	                center: ['50%', '50%'],
	                avoidLabelOverlap: false,
	                label: {
	                    normal: {
	                        show: false,
	                        position: 'center'
	                    },
	                    emphasis: {
	                        show: true,
	                        textStyle: {
	                            fontSize: '30',
	                            fontWeight: 'bold'
	                        }
	                    }
	                },
	                labelLine: {
	                    normal: {
	                        show: false
	                    }
	                },
	                data: [
	                    {value: 335, name: '库表'},
	                    {value: 310, name: '文件'},
	                    {value: 234, name: '接口'}
	                ]
	            }
	        ]
	    };
	    var barchartOption = {
	        color: ['#ff0066'],
	        grid: {
	            x: 20,
	            y: 20,
	            x2: 4,
	            y2: 20,
	            borderWidth: 1,
	            borderColor: '#05345A',
	            containLabel: true,
	        },
	        tooltip: {
	            trigger: 'axis'
	        },
	        calculable: true,
	        xAxis: [
	            {
	                type: 'category',
	                axisTick: {length: 0},
	                splitLine: splitLine,
	                axisLine: axisLine,
	                axisLabel: axisLabel,
	                data: ['随州', '仙桃', '鄂州', '神农架', '宜昌', '荆州', '黄冈', '恩施', '孝感', '潜江', '十堰', '荆门', '咸宁', '天门', '襄樊', '黄石', '武汉']
	            }
	        ],
	        yAxis: [
	            {
	                type: 'value',
	                boundaryGap: true,
	                axisTick: {length: 0},
	                splitLine: splitLine,
	                axisLine: axisLine,
	                axisLabel: axisLabel
	            }
	        ],
	        series: [
	            {
	                name: '库表',
	                type: 'bar',
	                barWidth:16,
	                smooth: true,
	                data: [2222, 1212, 3446, 3448, 2329, 5225, 3543, 4345,2528, 3245, 3452, 5412, 2226, 3348, 4442, 5555, 6632]
	
	            }
	        ]
	    };
	    pie.setOption(pieOption);
    }
    


//    点击切换
    $("#charttab li").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
    $("#charttab1 li").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active")
    })
